import React from "react";
import { render } from "react-dom";
import Display from "./mobx/components/display";
import Keyboard from "./mobx/components/keyboard";
import { Provider } from "mobx-react";
import Store from './mobx/store';

const styles = {
  fontFamily: "sans-serif",
  width: "414px",
  height: "628px",
  display: 'flex',
  flexDirection: 'column'
};

export class App extends React.PureComponent {
    pageStore;

    constructor(props) {
        super(props);
        this.pageStore = new Store(props);
    }

    render() {
        return (
            <Provider store={this.pageStore}>
                <div style={styles}>
                    <Display />
                    <Keyboard />
                </div>
            </Provider>
        );
    }
}

render(<App />, document.getElementById("root"));